<template>
  <!-- 个人名片编辑页面 -->
  <view class="main">
    <view class="content">
      <view class="touxiang">
        <text>头像</text>
        <view class="tupian" @tap="clk">
          <image class="tou" :src="imgs" mode="aspectFill"></image>
          <view class="xiangji">
            <image src="../../imges/xiangji.png" mode="aspectFill"></image>
          </view>
        </view>
      </view>
      <view class="name">
        <text>真实姓名</text>
        <view class="right">
          <input
            type="text"
            value=""
            v-model="name"
            placeholder-class="pla"
            placeholder="请输入姓名"
          />
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="sex">
        <text>性别</text>
        <view class="right">
          <view class="nan" @tap="xuanzhe(1)">
            <image
              src="../../imges/weixuan.png"
              mode="aspectFill"
              v-show="sex != 1"
            ></image>
            <image
              src="../../imges/xuanzhong1.png"
              mode="aspectFill"
              v-show="sex == 1"
            ></image>
          </view>
          <text class="nan1">男</text>
          <view class="nv" @tap="xuanzhe(2)">
            <image
              src="../../imges/weixuan.png"
              mode="aspectFill"
              v-show="sex != 0"
            ></image>
            <image
              src="../../imges/xuanzhong1.png"
              mode="aspectFill"
              v-show="sex == 0"
            ></image>
          </view>
          <text>女</text>
        </view>
      </view>
      <view class="birthday">
        <text>生日</text>
        <view class="right">
          <picker
            mode="date"
            :value="date"
            :start="startDate"
            :end="endDate"
            @change="dateChange"
          >
            <view style="color: #333333">{{ date }}</view>
          </picker>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="phone">
        <text>手机号码</text>
        <view class="right">
          <input
            type="text"
            value=""
            v-model="phone"
            :disabled="true"
            placeholder-class="pla"
            placeholder="请输入手机号"
          />
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="zwjs">
        <text>自我介绍</text>
        <navigator
          :url="'/pages/per_center/introduce?text=' + zwjs"
          hover-class="none"
          class="right"
        >
          <input
            type="text"
            v-model="zwjs"
            value=""
            placeholder-class="pla"
            placeholder="请输入自我介绍"
          />
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </navigator>
      </view>
      <view class="name">
        <text>公司名称</text>
        <navigator
          :url="'/pages/per_center/company?company=' + company"
          hover-class="none"
          class="right"
        >
          <input
            type="text"
            value=""
            v-model="company"
            placeholder-class="pla"
            placeholder="请输入公司名称"
          />
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </navigator>
      </view>
      <view class="name">
        <text>行业</text>
        <view @tap="gohangye" class="right">
          <input
            type="text"
            value=""
            v-model="hangye"
            placeholder-class="pla"
            disabled
            placeholder="请输入行业"
          />
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="name">
        <text>职位</text>
        <view class="right">
          <input
            type="text"
            value=""
            v-model="zhiwei"
            placeholder-class="pla"
            placeholder="请输入职位"
          />
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="name">
        <text>城市</text>
        <navigator
          :url="
            '/pages/per_center/city?shi=' +
            shimingData.provinceStr +
            '&qu=' +
            shimingData.cityStr
          "
          hover-class="none"
          class="right"
        >
          <input
            type="text"
            value=""
            v-model="city"
            placeholder-class="pla"
            placeholder="请输入城市"
          />
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </navigator>
      </view>
      <view class="name">
        <text>邮箱</text>
        <view class="right">
          <input
            type="text"
            value=""
            v-model="email"
            placeholder-class="pla"
            placeholder="请输入邮箱"
          />
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="footer">
        <view class="save" @tap="save"> 保存资料 </view>
      </view>
    </view>

    <avatar
      @upload="doUpload"
      quality="1"
      ref="avatar"
      selWidth="200upx"
      selHeight="200upx"
    ></avatar>
  </view>
</template>
<script>
import request from "../../utils/request.js";
import avatar from "../../components/yq-avatar/yq-avatar.vue"; //图片剪裁
export default {
  components: {
    avatar,
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },
  data() {
    // 设置日期
    const currentDate = this.getDate({
      format: true,
    });
    return {
      shimingData: {},
      sex: "",
      imgs: "",
      date: "请选择日期",
      zwjs: "",
      name: "",
      phone: "",
      company: "",
      hangye: "",
      zhiwei: "",
      city: "",
      email: "",
      isUpdateIndustry: "",
      hangyeId: "",
      shengId: "",
      shiId: "",
      upToken: "",
      qiniuyun: "",
      urls: [],
    };
  },
  onShow() {
    const that = this;
    uni.getStorage({
      key: "zwjs",
      success: function (res) {
        that.zwjs = res.data;
      },
    });
    uni.removeStorage({
      key: "zwjs",
      success: function (res) {
        console.log("success");
      },
    });
    uni.getStorage({
      key: "gsName",
      success: function (res) {
        that.company = res.data;
      },
    });
    uni.getStorage({
      key: "hangye",
      success: function (res) {
        that.hangye = res.data.name;
        that.hangyeId = res.data.id;
      },
    });
    uni.getStorage({
      key: "city",
      success: function (res) {
        that.city = res.data.name;
        that.shengId = res.data.shengId;
        that.shiId = res.data.shiId;
      },
    });
    uni.removeStorage({
      key: "gsName",
      success: function (res) {
        console.log("success");
      },
    });
    uni.removeStorage({
      key: "hangye",
      success: function (res) {
        console.log("success");
      },
    });
    uni.removeStorage({
      key: "city",
      success: function (res) {
        console.log("success");
      },
    });
  },
  onLoad() {
    this.card();
    let that = this;
    request({
      url: "webSite/home/uploadApplication",
      method: "post",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": "1.3.3",
        "Source-Type": 7,
        // 'token': token
      },
      data: {},
    }).then((res) => {
      that.upToken = res.data.data.upToken;
      that.qiniuyun = res.data.data.qiniuDomain;
    });
  },
  methods: {
    clk() {
      this.$refs.avatar.fChooseImg(2, {
        selWidth: "450upx",
        selHeight: "450upx",
        inner: false,
        canRotate: false,
      });
    },
    doUpload(rsp) {
      this.$set(this.urls, rsp.index, rsp.path);
      this.imgs = rsp.path;
      uni.uploadFile({
        url: "https://up-z0.qiniup.com",
        filePath: rsp.path,
        name: "file",
        formData: {
          token: this.upToken,
        },
        success: (uploadFileRes) => {
          this.imgs = this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key;
        },
      });
    },
    gohangye() {
      if (this.isUpdateIndustry == 1) {
        uni.navigateTo({
          url:
            "/pages/per_center/industry?industry=" +
            this.shimingData.industry +
            "&name=" +
            this.shimingData.industryStr,
        });
      } else {
        uni.showToast({
          title: "每个月只能修改一次",
          duration: 2000,
          icon: "none",
        });
      }
    },
    // 选择日期
    dateChange(e) {
      this.date = e.target.value;
    },
    xuanzhe(sex) {
      if (sex == 1) {
        this.sex = 1;
      } else {
        this.sex = 0;
      }
    },
    // selctPhone(e) {
    //   //点击上传图片
    //   let that = this;
    //   uni.chooseImage({
    //     count: 1,
    //     success: (res) => {
    //       // let tempFilePaths = res.tempFilePaths;
    //       // that.imgs = [...tempFilePaths]
    //       // console.log(tempFilePaths)
    //       uni.uploadFile({
    //         url: "https://up-z0.qiniup.com",
    //         filePath: res.tempFilePaths[0],
    //         name: "file",
    //         formData: {
    //           token: that.upToken,
    //         },
    //         success: (uploadFileRes) => {
    //           that.imgs =
    //             that.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key;
    //         },
    //       });
    //     },
    //   });
    // },
    // 获取年月日信息
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    card() {
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/personalSpace/getRealUserInformation",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          console.log(res.data.code);
          if (res.data.code == 200) {
            that.shimingData = res.data.data;
            that.imgs = res.data.data.avatarUrl;
            that.name = res.data.data.realName;
            that.phone = res.data.data.telphone;
            that.hangye = res.data.data.industryStr;
            that.company = res.data.data.company;
            that.zhiwei = res.data.data.post;
            that.city = res.data.data.provinceStr + res.data.data.cityStr;
            that.isUpdateIndustry = res.data.data.isUpdateIndustry;
            that.hangyeId = res.data.data.industry;
            that.shengId = res.data.data.provinceId;
            that.shiId = res.data.data.cityId;
            that.sex = res.data.data.sex;
            that.email = res.data.data.mail;
            that.zwjs = res.data.data.selfIntroduction;
            if (res.data.data.birthday) {
              that.date = res.data.data.birthday.substring(0, 10);
            } else {
              that.date = "请选择日期";
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    save() {
      let token = uni.getStorageSync("token");
      const that = this;
      if (this.phone && !/^1[3456789]\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "手机号码有误，请重新输入",
          duration: 2000,
          icon: "none",
        });
      } else if (
        this.email &&
        !/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/.test(
          this.email
        )
      ) {
        uni.showToast({
          title: "请输入正确的邮箱格式",
          duration: 2000,
          icon: "none",
        });
      } else if (this.date == "" || this.date == undefined) {
        uni.showToast({
          title: "请选择生日",
          duration: 2000,
          icon: "none",
        });
      } else {
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url: "app/personalSpace/realUserInformation",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              avatarUrl: this.imgs,
              realName: this.name,
              sex: this.sex,
              birthday: this.date + " 00:00:00",
              birthdayDefault: 0,
              telphone: this.phone,
              selfIntroduction: this.zwjs,
              industry: this.hangyeId,
              company: this.company,
              post: this.zhiwei,
              provinceId: this.shengId,
              cityId: this.shiId,
              mail: this.email,
            },
          }).then((res) => {
            console.log(res.data.code);
            if (res.data.code == 200) {
              uni.showToast({
                title: "保存成功",
                duration: 2000,
                icon: "none",
              });
              setTimeout(function () {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1500);
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-bottom: 140rpx;
}
.content {
  padding: 0 32rpx;
  .touxiang {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 27rpx;
    border-bottom: 2rpx solid #eeeeee;
    text {
      font-size: 32rpx;
      color: #999999;
      font-weight: 400;
    }
    .tupian {
      width: 180rpx;
      height: 180rpx;
      border-radius: 50%;
      background-image: url(../../imges/head_kong.png);
      background-size: 100% 100%;
      position: relative;
      .tou {
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
      }
      .xiangji {
        position: absolute;
        bottom: -10rpx;
        right: -10rpx;
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(180deg, #3665fe 0%, #2168eb 100%);
        image {
          width: 54rpx;
          height: 54rpx;
        }
      }
    }
  }
  .name,
  .sex,
  .phone,
  .birthday,
  .zwjs {
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    color: #999999;
    padding: 39rpx 0;
    border-bottom: 2rpx solid #eeeeee;
    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      input {
        min-width: 160rpx;
        margin-right: 10rpx;
        color: #333333;
        text-align: right;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      image {
        width: 20rpx;
        height: 28rpx;
      }
      .pla {
        text-align: right;
      }
    }
  }
  .birthday .right image {
    margin-left: 10rpx;
  }
  .sex {
    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 20rpx;
      .nan {
        display: flex;
        justify-content: space-between;

        image {
          width: 38rpx;
          height: 38rpx;
        }
      }
      .nan1 {
        margin-right: 26rpx;
      }
      .nv {
        display: flex;
        justify-content: space-between;
        image {
          width: 38rpx;
          height: 38rpx;
        }
      }
      text {
        margin-left: 9rpx;
      }
    }
  }
  .footer {
    width: 100%;
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    .save {
      width: 600rpx;
      height: 86rpx;
      background-color: #2168eb;
      color: #ffffff;
      text-align: center;
      line-height: 86rpx;
      font-size: 30rpx;
      border-radius: 43rpx;
      // margin-top: 25rpx;
      // margin-bottom: 57rpx;
    }
  }
}
</style>
